<template>
  <div class="plan">
    <div class="cunsustitle">数据成果统计明细</div>
    <div class="cunsus">
      <div class="navtitle">
        <p
          :class="selectType == 1 ? 'querytitle' : ''"
          @click="changeselectType(1)"
        >
          区域统计
        </p>
        <p
          :class="selectType == 2 ? 'querytitle' : ''"
          @click="changeselectType(2)"
        >
          时间统计
        </p>
      </div>
      <template v-if="selectType == 1">
        <div class="query_dayBox">
          <div class="query_day">
            <el-date-picker
              v-model="datevalue"
              type="daterange"
              class="mydatepicker"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="changeDate"
            />
            <div class="query_datelist">
              <div
                v-for="(item, index) in datenamelist"
                :key="index"
                :class="datenameIndex == index ? 'currentdatetype' : ''"
                @click="querydate(item, index)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div v-if="data_stats_download_auth">
            <download-excel
              class="export-excel-wrapper"
              :header="fileheadername"
              :data="json_data"
              :fields="json_fields"
              :name="filename"
            >
              下载 <i class="el-icon-download"></i>
            </download-excel>
          </div>
        </div>
        <div class="tableList">
          <div class="table_title">
            <div class="title_area">地区</div>
            <div class="title_nest">机巢</div>
            <div class="havetwo">
              <div class="havemoretitle">
                <p>架次</p>
                <p>照片</p>
                <p>问题</p>
                <p>视频</p>
                <p>全景</p>
                <p>三维</p>
                <p>正射</p>
              </div>
            </div>
          </div>
          <!-- /////////// 合计数据 //////////// -->
          <div class="table_overflow">
            <div class="count_title">
              <div class="count_area">合计</div>
              <div class="count_nest">共{{ sumInfo.totalNest }}架无人机</div>

              <div class="count_havetwo">
                <div class="count_havemoretitle">
                  <p>{{ sumInfo.fly1 }}</p>
                  <p>{{ sumInfo.fly2 }}</p>
                  <p>{{ sumInfo.fly3 }}</p>
                  <p>{{ sumInfo.fly4 }}</p>
                  <p>{{ sumInfo.fly5 }}</p>
                  <p>{{ sumInfo.fly6 }}</p>
                  <p>{{ sumInfo.fly7 }}</p>
                </div>
              </div>
            </div>
            <!-- ////////////////// -->
            <div class="table_list">
              <div
                class="table_info"
                v-for="(item, index) in tableData"
                :key="index"
              >
                <div class="info_area">
                  <div>
                    {{ item.district }}
                  </div>
                </div>
                <!-- <div class="info_nest">共有{{ item.nests.length }}架无人机</div> -->

                <div class="infobox">
                  <!-- ///////////////////这里是列表机巢信息汇总 -->
                  <div class="info_data">
                    <div class="info_nest" @click="isShowAllNest(item, index)">
                      <div>共有{{ item.nests.length }}架无人机</div>
                      <i v-show="!item.isShow" class="el-icon-arrow-down"></i>
                      <i v-show="item.isShow" class="el-icon-arrow-up"></i>
                    </div>
                    <div class="havemoretitle">
                      <p>{{ formatCount(item.nests, "fly_1") }}</p>
                      <p>{{ formatCount(item.nests, "fly_2") }}</p>
                      <p>{{ formatCount(item.nests, "fly_3") }}</p>
                      <p>{{ formatCount(item.nests, "fly_4") }}</p>
                      <p>{{ formatCount(item.nests, "fly_5") }}</p>
                      <p>{{ formatCount(item.nests, "fly_6") }}</p>
                      <p>{{ formatCount(item.nests, "fly_7") }}</p>
                    </div>
                  </div>
                  <!-- ////////////// -->

                  <div :class="item.isShow ? '' : 'isShowAll'">
                    <div
                      class="info_data info_data_list"
                      v-for="(item2, index2) in item.nests"
                      :key="index2 + '_' + index"
                    >
                      <div class="info_nest">
                        {{ item2.nest_name }}
                      </div>
                      <div class="havemoretitle">
                        <p>{{ item2.flight_sorties }}</p>
                        <p>{{ item2.photo_count }}</p>
                        <p>{{ item2.issue_count }}</p>
                        <p>{{ item2.video_count }}</p>
                        <p>{{ item2.qj_count }}</p>
                        <p>{{ item2.sw_count }}</p>
                        <p>{{ item2.zs_count }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- 下面是按照时间统计 -->

      <template v-if="selectType == 2">
        <div class="query_dayBox">
          <div class="query_day">
            <div class="filter_area" id="filter_area">
              <label>地区</label>
              <el-select
                v-model="searchLabelIndex"
                filterable
                placeholder="请选择筛选地区"
              >
                <el-option
                  v-for="(item, index) in searchLabelList"
                  :key="index"
                  :label="item"
                  :value="index"
                >
                </el-option>
              </el-select>
            </div>

            <el-date-picker
              v-model="datevalue_t"
              type="daterange"
              class="mydatepicker"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="changeDateT"
            />
            <div class="query_datelist">
              <div
                v-for="(item, index) in datenamelist_t"
                :key="index"
                :class="datenameIndex_t == index ? 'currentdatetype' : ''"
                @click="querydateT(item, index)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div v-if="data_stats_download_auth">
            <download-excel
              class="export-excel-wrapper"
              :header="fileheadernameT"
              :data="json_dataT"
              :fields="json_fieldsT"
              :name="filenameT"
            >
              下载 <i class="el-icon-download"></i>
            </download-excel>
          </div>
        </div>
        <div class="tableList">
          <div class="table_title">
            <div class="title_area">时间</div>
            <div class="title_nest">机巢</div>
            <div class="havetwo">
              <div class="havemoretitle">
                <p>架次</p>
                <p>照片</p>
                <p>问题</p>
                <p>视频</p>
                <p>全景</p>
                <p>三维</p>
                <p>正射</p>
              </div>
            </div>
          </div>
          <!-- /////////// 合计数据 //////////// -->
          <div class="table_overflow">
            <div class="count_title">
              <div class="count_area">合计</div>
              <div class="count_nest">全部地区</div>
              <div class="count_havetwo">
                <div class="count_havemoretitle">
                  <p>{{ sumInfoT.fly1 }}</p>
                  <p>{{ sumInfoT.fly2 }}</p>
                  <p>{{ sumInfoT.fly3 }}</p>
                  <p>{{ sumInfoT.fly4 }}</p>
                  <p>{{ sumInfoT.fly5 }}</p>
                  <p>{{ sumInfoT.fly6 }}</p>
                  <p>{{ sumInfoT.fly7 }}</p>
                </div>
              </div>
            </div>
            <!-- ////////////////// -->
            <div class="table_list">
              <div
                class="table_info"
                v-for="(item, index) in tableData_t"
                :key="index"
              >
                <div class="info_area">
                  <div>
                    {{ item.month }}
                  </div>
                </div>
                <!-- <div class="info_nest">共有{{ item.nests.length }}架无人机</div> -->

                <div class="infobox">
                  <!-- ///////////////////这里是列表机巢信息汇总 -->
                  <div class="info_data">
                    <div class="info_nest" @click="isShowAllNestT(item, index)">
                      <div>全部地区</div>
                      <i v-show="!item.isShow" class="el-icon-arrow-down"></i>
                      <i v-show="item.isShow" class="el-icon-arrow-up"></i>
                    </div>
                    <div class="havemoretitle">
                      <p>{{ formatCount(item.districts, "fly_1") }}</p>
                      <p>{{ formatCount(item.districts, "fly_2") }}</p>
                      <p>{{ formatCount(item.districts, "fly_3") }}</p>
                      <p>{{ formatCount(item.districts, "fly_4") }}</p>
                      <p>{{ formatCount(item.districts, "fly_5") }}</p>
                      <p>{{ formatCount(item.districts, "fly_6") }}</p>
                      <p>{{ formatCount(item.districts, "fly_7") }}</p>
                    </div>
                  </div>
                  <!-- ////////////// -->

                  <div :class="item.isShow ? '' : 'isShowAll'">
                    <div
                      class="info_data info_data_list"
                      v-for="(item2, index2) in item.districts"
                      :key="index2 + '_' + index"
                    >
                      <div class="info_nest">
                        {{ item2.district }}
                      </div>
                      <div class="havemoretitle">
                        <p>{{ item2.flight_sorties }}</p>
                        <p>{{ item2.photo_count }}</p>
                        <p>{{ item2.issue_count }}</p>
                        <p>{{ item2.video_count }}</p>
                        <p>{{ item2.qj_count }}</p>
                        <p>{{ item2.sw_count }}</p>
                        <p>{{ item2.zs_count }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="maskplan" v-show="isShowMask">
      <div>
        <i class="el-icon-loading"></i>
        <p class="el-loading-text">Loading</p>
      </div>
    </div>
  </div>
</template>
<script>
import {
  kanbanNestDistrict,
  kanbanDetailResultRegional,
  kanbanDetailResultTime,
} from "@/api/censuisdata";

export default {
  props: {
    inputDate: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    // 权限
    // 数据统计 下载
    data_stats_download_auth() {
      return this.userAuthor?.data_stats?.download?.have_auth;
    },

    sumInfo: function () {
      var _this = this;
      var obj = {
        totalNest: 0,
        fly1: 0,
        fly2: 0,
        fly3: 0,
        fly4: 0,
        fly5: 0,
        fly6: 0,
        fly7: 0,
      };

      _this.tableData.forEach((item, index) => {
        obj.totalNest += item.nests.length;
        item.nests.forEach((item2, index2) => {
          obj.fly1 += item2.flight_sorties;
          obj.fly2 += item2.photo_count;
          obj.fly3 += item2.issue_count;
          obj.fly4 += item2.video_count;
          obj.fly5 += item2.qj_count;
          obj.fly6 += item2.sw_count;
          obj.fly7 += item2.zs_count;
        });
      });
      return obj;
    },
    sumInfoT: function () {
      var _this = this;
      var obj = {
        totalNest: 0,
        fly1: 0,
        fly2: 0,
        fly3: 0,
        fly4: 0,
        fly5: 0,
        fly6: 0,
        fly7: 0,
      };
      _this.tableData_t.forEach((item, index) => {
        item.districts.forEach((item2, index2) => {
          obj.fly1 += item2.flight_sorties;
          obj.fly2 += item2.photo_count;
          obj.fly3 += item2.issue_count;
          obj.fly4 += item2.video_count;
          obj.fly5 += item2.qj_count;
          obj.fly6 += item2.sw_count;
          obj.fly7 += item2.zs_count;
        });
      });
      return obj;
    },
    tableDataT: function () {
      var that = this;
      let _search = that.searchLabel.toLowerCase();
      let newListData = []; // 用于存放搜索出来数据的新数组
      if (_search) {
        that.setTableDataT.forEach((item) => {
          var districts = [];
          item.districts.filter((item2) => {
            if (item2.district.toLowerCase().indexOf(_search) !== -1) {
              districts.push(item2);
            }
          });
          newListData.push({ districts: districts, month: item.month });
        });
      }
      console.log(newListData);
      return newListData;
    },
  },
  data() {
    return {
      json_fields: {
        地区: "district",
        机巢: "nest_name",
        架次: "flight_sorties",
        照片: "photo_count",
        问题: "issue_count",
        视频: "video_count",
        全景: "qj_count",
        三维: "sw_count",
        正射: "zs_count",
      },
      json_data: [],
      filename: "数据成果统计明细-区域统计",
      fileheadername: "",
      json_fieldsT: {
        时间: "district",
        机巢: "nest_name",
        架次: "flight_sorties",
        照片: "photo_count",
        问题: "issue_count",
        视频: "video_count",
        全景: "qj_count",
        三维: "sw_count",
        正射: "zs_count",
      },
      json_dataT: [],
      filenameT: "数据成果统计明细-时间统计",
      fileheadernameT: "",
      selectType: 1,
      tableData: [],
      countInfo: {},
      tableData_t: [],
      setTableDataT: [],
      countInfo_t: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
      datevalue: [],
      datevalue_t: [],
      datenamelist: [
        {
          type: "1",
          name: "近7天",
        },
        {
          type: "2",
          name: "近30天",
        },
        {
          type: "3",
          name: "本月",
        },
        {
          type: "4",
          name: "上月",
        },
      ],
      datenamelist_t: [
        {
          type: "1",
          name: "近3个月",
        },
        {
          type: "2",
          name: "近半年",
        },
        {
          type: "3",
          name: "今年",
        },
        {
          type: "4",
          name: "全部",
        },
      ],
      datenameIndex: 0,
      nestCodeList: [],
      datenameIndex_t: 0,
      nestCodeList_t: [],
      searchLabel: "常山县",
      searchLabelIndex: 0,
      searchLabelList: [],
      isShowMask: false,

      userAuthor: null,
    };
  },
  created() {
    this.userAuthor = this.$store.getters.userAuth;
    this.getSearchLabelList();
  },
  mounted() {
    if (this.inputDate && this.inputDate.length === 2) {
      this.datevalue = this.inputDate;
      this.datevalue_t = this.inputDate;
      this.datenameIndex_t = null;
      this.datenameIndex = null;
    } else {
      this.datevalue = this.setDefaultDateRange(6);
      this.datevalue_t = this.setDefaultDateRange(90);
    }
    this.isShowMask = true;
    this.initData("0");
  },
  methods: {
    getSearchLabelList() {
      kanbanNestDistrict({ dept_id: this.$store.getters.deptId }).then(
        (res) => {
          this.searchLabelList = res.data;
          this.searchLabelList.unshift("全部");
        }
      );
    },
    filterAreaData() {
      var that = this;
      let _search = that.searchLabel.toLowerCase();
      let newListData = []; // 用于存放搜索出来数据的新数组
      if (_search) {
        that.tableData_t.forEach((item) => {
          var districts = [];
          item.districts.filter((item2) => {
            if (item2.district.toLowerCase().indexOf(_search) !== -1) {
              districts.push(item2);
            }
          });
          newListData.push({ districts: districts, month: item.month });
        });
      }
      console.log(newListData);
      that.tableData_t = newListData;
    },
    changeselectType(type) {
      this.selectType = type;
      if (type == 2) {
        this.initDataT();
      }
      console.log(this.selectType);
    },
    setType(data) {
      console.log(data);
    },
    initData(num) {
      var _this = this;

      const loading = _this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      if (num == "0") {
        loading.close();
      }

      if (this.datevalue) {
        kanbanDetailResultRegional({
          begin_date: _this.datevalue[0],
          end_date: _this.datevalue[1],
          dept_id: this.$store.getters.deptId,
        })
          .then((res) => {
            if (num == "0") {
              _this.isShowMask = false;
            } else {
              loading.close();
            }
            if (res.msg == "ok") {
              if (res.data) {
                _this.tableData = res.data;
              } else {
                _this.tableData = [];
                _this.$message({
                  message: "暂无数据",
                  type: "info",
                });
              }
            } else {
              _this.tableData = [];
              _this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          })
          .catch((err) => {
            if (num == "0") {
            } else {
              loading.close();
            }
            _this.tableData = [];
            _this.$message({
              message: "暂无数据,请稍后重试",
              type: "warning",
            });
          });
      } else {
        _this.datevalue = this.setDefaultDateRange(6);
        _this.initData();
      }
    },
    initDataT() {
      var _this = this;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      _this.searchLabelIndex = 0;
      console.log(this.datevalue_t);
      if (this.datevalue_t) {
        kanbanDetailResultTime({
          begin_date: _this.datevalue_t[0],
          end_date: _this.datevalue_t[1],
          dept_id: this.$store.getters.deptId,
        })
          .then((res) => {
            
            loading.close();
            if (res.msg == "ok") {
              if (res.data) {
                _this.tableData_t = res.data;
                _this.setTableDataT = res.data;
              } else {
                _this.tableData_t = [];
                _this.setTableDataT = [];
                _this.$message({
                  message: "暂无数据",
                  type: "info",
                });
              }
            } else {
              _this.tableData_t = [];
              _this.setTableDataT = [];
              _this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          })
          .catch((err) => {
            loading.close();
            _this.$message({
              message: "暂无数据,请稍后重试",
              type: "warning",
            });
          });
      } else {
        _this.datevalue_t = this.setDefaultDateRange(90);
        _this.initDataT();
      }
    },
    isShowAllNest(item, index) {
      console.log(item, index);
      var that = this;
      if (!that.tableData[index].isShow) {
        that.$set(that.tableData[index], "isShow", true);
      } else {
        that.$set(that.tableData[index], "isShow", false);
      }
    },
    isShowAllNestT(item, index) {
      console.log(item, index);
      var that = this;
      if (!that.tableData_t[index].isShow) {
        that.$set(that.tableData_t[index], "isShow", true);
      } else {
        that.$set(that.tableData_t[index], "isShow", false);
      }
    },
    formatCount(data, type) {
      var count = 0;
      data.forEach((item, index) => {
        switch (type) {
          case "fly_1":
            count += Number(item.flight_sorties);
            break;
          case "fly_2":
            count += Number(item.photo_count);
            break;
          case "fly_3":
            count += Number(item.issue_count);
            break;
          case "fly_4":
            count += Number(item.video_count);
            break;
          case "fly_5":
            count += Number(item.qj_count);
            break;
          case "fly_6":
            count += Number(item.sw_count);
            break;
          case "fly_7":
            count += Number(item.zs_count);
            break;
        }
      });
      return count;
    },
    formatCount1(data, type) {
      var count = 0;
      data.forEach((item, index) => {
        switch (type) {
          case "plan":
            count += Number(item.schedule_flight.count);
            break;
          case "fly_1":
            count += Number(item.actual_flight.quan_fu_gai);
            break;
          case "fly_2":
            count += Number(item.actual_flight.quan_jing);
            break;
          case "fly_3":
            count += Number(item.actual_flight.san_wei);
            break;
          case "fly_4":
            count += Number(item.actual_flight.zheng_she);
            break;
          case "fly_5":
            count += Number(item.actual_flight.lin_shi);
            break;
          case "fly_6":
            count += Number(item.actual_flight.total);
            break;
          case "fly_7":
            count += Number(item.zs_count);
            break;
          case "count_1":
            count += Number(item.indicators.lei_ji_shi_chang);
            break;
          case "count_2":
            count += Number(item.indicators.lei_ji_li_cheng);
            break;
          case "count_3":
            count += Number(item.indicators.ri_jun_jia_ci);
            break;
          case "count_4":
            count += Number(item.indicators.gu_zhang_shi_chang);
            break;
        }
      });
      return count;
    },
    formatTimeDiff(time) {
      var diffTime;
      var diffNum = time / 60;
      if (diffNum <= 60) {
        if (diffNum.toString().indexOf(".") == -1) {
          diffTime = diffNum + "分钟";
        } else {
          diffTime = diffNum.toFixed(2) + "分钟";
        }
      }
      if (diffNum > 60) {
        diffNum = diffNum / 60;
        if (diffNum <= 24) {
          if (diffNum.toString().indexOf(".") == -1) {
            diffTime = diffNum + "小时";
          } else {
            diffTime = diffNum.toFixed(2) + "小时";
          }
        } else {
          diffNum = diffNum / 24;
          if (diffNum.toString().indexOf(".") == -1) {
            diffTime = diffNum + "天";
          } else {
            diffTime = diffNum.toFixed(2) + "天";
          }
        }
      }
      return diffTime;
    },
    changeDate(e) {
      console.log(e);
      this.datenameIndex = null;
      this.datevalue = e;
      this.initData();
    },
    changeDateT(e) {
      console.log(e);
      this.datenameIndex_t = null;
      this.datevalue_t = e;
      this.initDataT();
    },
    querydate(data, index) {
      var that = this;
      if (data.type == "1") {
        that.datevalue = that.setDefaultDateRange(6);
      }
      if (data.type == "2") {
        that.datevalue = that.setDefaultDateRange(30);
      }
      if (data.type == "3") {
        that.datevalue = [
          that.getMonth("s", 0),
          that.setDefaultDateRange(0)[0],
        ];
      }
      if (data.type == "4") {
        that.datevalue = [that.getMonth("s", -1), that.getMonth("e", -1)];
      }
      that.datenameIndex = index;
      console.log(that.datevalue);
      that.initData();
    },
    querydateT(data, index) {
      var that = this;
      var date = new Date();
      const year = date.getFullYear();
      const month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : "" + (date.getMonth() + 1);
      const strDate =
        date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate();
      console.log(year + "-" + month + "-" + strDate);
      var firstday = year + "-01-01";
      var today = year + "-" + month + "-" + strDate;
      if (data.type == "1") {
        that.datevalue_t = that.setDefaultDateRange(90);
      }
      if (data.type == "2") {
        that.datevalue_t = that.setDefaultDateRange(180);
      }
      if (data.type == "3") {
        that.datevalue_t = [firstday, today];
      }
      if (data.type == "4") {
        that.datevalue_t = ["2021-01-01", today];
      }
      that.datenameIndex_t = index;
      console.log(that.datevalue_t);
      that.initDataT();
    },
    setDefaultDateRange(num) {
      var datePickerData;
      const endDate = new Date();
      const startDate = new Date();
      startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * num);
      //   endDate.setTime(endDate.getTime() + 3600 * 1000 * 24)
      endDate.setTime(endDate.getTime());
      const startStr = this.date2Str(startDate);
      const endStr = this.date2Str(endDate);
      datePickerData = [startStr, endStr];
      return datePickerData;
    },
    date2Str(date) {
      console.log("date2Str3", date);
      if (date instanceof Date) {
        const year = date.getFullYear();
        const month =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : "" + (date.getMonth() + 1);
        const strDate =
          date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate();
        return year + "-" + month + "-" + strDate;
      }
      return "2022-10-10";
    },
    getMonth(type, months) {
      var d = new Date();
      var year = d.getFullYear();
      var month = d.getMonth() + 1;
      if (Math.abs(months) > 12) {
        months = months % 12;
      }
      if (months != 0) {
        if (month + months > 12) {
          year++;
          month = (month + months) % 12;
        } else if (month + months < 1) {
          year--;
          month = 12 + month + months;
        } else {
          month = month + months;
        }
      }
      month = month < 10 ? "0" + month : month;
      var date = d.getDate();
      var firstday = year + "-" + month + "-" + "01";
      var lastday = "";
      if (
        month == "01" ||
        month == "03" ||
        month == "05" ||
        month == "07" ||
        month == "08" ||
        month == "10" ||
        month == "12"
      ) {
        lastday = year + "-" + month + "-" + 31;
      } else if (month == "02") {
        if (
          (year % 4 == 0 && year % 100 != 0) ||
          (year % 100 == 0 && year % 400 == 0)
        ) {
          lastday = year + "-" + month + "-" + 29;
        } else {
          lastday = year + "-" + month + "-" + 28;
        }
      } else {
        lastday = year + "-" + month + "-" + 30;
      }
      var day = "";
      if (type == "s") {
        day = firstday;
      } else {
        day = lastday;
      }
      return day;
    },
  },
  watch: {
    searchLabelIndex(val) {
      this.searchLabel = this.searchLabelList[val];
      if (this.searchLabel == "全部") {
        this.tableData_t = this.setTableDataT;
      } else {
        this.tableData_t = this.tableDataT;
      }
    },
    inputDate(date) {
      this.datevalue = date;
      this.datevalue_t = date;
      this.datenameIndex_t = null;
      this.datenameIndex = null;
      this.initData("0");
    },
    tableData(val) {
      console.log(val);
      var _this = this;
      var newtableData = val;
      _this.filename = "数据成果统计明细-区域统计";
      _this.fileheadername =
        "数据成果统计明细-区域统计:" +
        _this.datevalue[0] +
        "至" +
        _this.datevalue[1];
      var arr = [];
      arr.push({
        district: "合计",
        nest_name: "共有" + _this.sumInfo.totalNest + "架无人机",
        flight_sorties: _this.sumInfo.fly1,
        photo_count: _this.sumInfo.fly2,
        issue_count: _this.sumInfo.fly3,
        video_count: _this.sumInfo.fly4,
        qj_count: _this.sumInfo.fly5,
        sw_count: _this.sumInfo.fly6,
        zs_count: _this.sumInfo.fly7,
      });
      newtableData.forEach((item, index) => {
        arr.push({
          district: item.district,
          nest_name: "共有" + item.nests.length + "架无人机",
          flight_sorties: _this.formatCount(item.nests, "fly_1"),
          photo_count: _this.formatCount(item.nests, "fly_2"),
          issue_count: _this.formatCount(item.nests, "fly_3"),
          video_count: _this.formatCount(item.nests, "fly_4"),
          qj_count: _this.formatCount(item.nests, "fly_5"),
          sw_count: _this.formatCount(item.nests, "fly_6"),
          zs_count: _this.formatCount(item.nests, "fly_7"),
        });
        item.nests.forEach((item2, index2) => {
          arr.push({
            district: "",
            nest_name: item2.nest_name,
            flight_sorties: item2.flight_sorties,
            photo_count: item2.photo_count,
            issue_count: item2.issue_count,
            video_count: item2.video_count,
            qj_count: item2.qj_count,
            sw_count: item2.sw_count,
            zs_count: item2.zs_count,
          });
        });
      });
      _this.json_data = arr;
    },
    tableData_t(val) {
      console.log(val);
      var _this = this;
      var newtableData = val;
      _this.filenameT = "数据成果统计明细-时间统计";
      _this.fileheadernameT =
        "数据成果统计明细-时间统计:" +
        _this.datevalue_t[0] +
        "至" +
        _this.datevalue_t[1];
      var arr = [];
      arr.push({
        district: "合计",
        nest_name: "全部地区",
        flight_sorties: _this.sumInfoT.fly1,
        photo_count: _this.sumInfoT.fly2,
        issue_count: _this.sumInfoT.fly3,
        video_count: _this.sumInfoT.fly4,
        qj_count: _this.sumInfoT.fly5,
        sw_count: _this.sumInfoT.fly6,
        zs_count: _this.sumInfoT.fly7,
      });
      newtableData.forEach((item, index) => {
        arr.push({
          district: item.month,
          nest_name: "全部地区",
          flight_sorties: _this.formatCount(item.districts, "fly_1"),
          photo_count: _this.formatCount(item.districts, "fly_2"),
          issue_count: _this.formatCount(item.districts, "fly_3"),
          video_count: _this.formatCount(item.districts, "fly_4"),
          qj_count: _this.formatCount(item.districts, "fly_5"),
          sw_count: _this.formatCount(item.districts, "fly_6"),
          zs_count: _this.formatCount(item.districts, "fly_7"),
        });
        item.districts.forEach((item2, index2) => {
          arr.push({
            district: "",
            nest_name: item2.district,
            flight_sorties: item2.flight_sorties,
            photo_count: item2.photo_count,
            issue_count: item2.issue_count,
            video_count: item2.video_count,
            qj_count: item2.qj_count,
            sw_count: item2.sw_count,
            zs_count: item2.zs_count,
          });
        });
      });
      _this.json_dataT = arr;
    },
  },
};
</script>
<style lang="scss" scoped>
.plan {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #d5d5d5;
  display: flex;
  flex-direction: column;
  .cunsustitle {
    height: 45px;
    line-height: 45px;
    font-size: 24px;
    font-weight: bolder;
  }
  .cunsus {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #2f334d;
    padding-left: 10px;
    border-radius: 4px;
    height: 100%;
    overflow: hidden;

    background: #1f244a;
    .navtitle {
      display: flex;
      font-size: 17px;
      font-weight: bolder;
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #323654;
      > p {
        padding: 0 50px;
        margin: 0;
        cursor: pointer;
      }
      .querytitle {
        border-bottom: 5px solid #0582c7;
      }
    }
    .query_dayBox {
      display: flex;
      justify-content: space-between;
    }
    .query_day {
      padding-top: 10px;
      padding-bottom: 15px;
      display: flex;
      .query_datelist {
        display: flex;
        padding-top: 6px;

        > div {
          width: 80px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          color: #ffffff;
          background: #49628d;
          border-radius: 4px;
          margin-left: 25px;
          cursor: pointer;
        }
        .currentdatetype {
          background: #3b6fb8;
        }
      }
      .filter_area {
        border: 1px solid #3d4059;
        border-radius: 2px;
        padding-left: 10px;
        margin-right: 20px;
        label {
          display: inline-block;
        }
      }
    }
  }
}
.maskplan {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000000;
  background: rgba(0, 0, 0, 0.5);
  > div {
    top: 50%;
    margin-top: -25px;
    width: 100%;
    text-align: center;
    position: absolute;
    .el-icon-loading {
      color: #ffffff;
      animation: rotating 2s linear infinite;
    }
    .el-loading-text {
      color: #409eff;
      margin: 3px 0;
      font-size: 18px;
    }
  }
}
#filter_area ::v-deep {
  .el-select .el-input .el-input__inner {
    background: #1f244a;
    color: #ffffff;
    border: none;
    height: 36px;
    line-height: 36px;
    text-align: center;
  }
}
::v-deep {
  .el-select-dropdown {
    background: #1f244a;
    border: 1px solid #4c8fa5;
    .popper__arrow::after {
      border-bottom-color: #1f244a;
    }
  }
  .el-select-dropdown__wrap {
    .el-select-dropdown__list {
      .el-select-dropdown__item {
        color: #b6bac4;
      }
      .selected {
        color: #409eff;
      }
      .hover {
        background-color: #123d78;
      }
    }
  }
}
.tableList {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .table_overflow {
    flex: 1;
    overflow: auto;
  }
  .table_title {
    display: flex;
    width: 100%;
    .title_area {
      width: 150px;
      border: 1px solid #61647a;
      border-right: none;
      line-height: 40px;
      text-indent: 10px;
    }
    .title_nest {
      width: 300px;
      border: 1px solid #61647a;
      line-height: 40px;
      text-indent: 10px;
    }
    .title_jiaci {
      width: 70px;
      border: 1px solid #61647a;
      // border-right: none;
      line-height: 40px;
      text-align: center;
    }
    .havetwo {
      flex: 1;
      border: 1px solid #61647a;
      border-right: none;
      border-left: none;
      border-top: none;
      line-height: 40px;
    }

    .havemoretitle {
      display: flex;
      justify-content: space-around;
      line-height: 40px;
      border-top: 1px solid #61647a;
      > p {
        margin: 0;
        flex: 1;
        text-align: center;
        border: 1px solid #61647a;
        border-bottom: none;
        border-left: none;
        border-top: none;
      }
    }
  }
  .count_title {
    display: flex;
    width: 100%;
    background: #0f1122;
    color: #6e9bfb;
    .count_area {
      width: 150px;
      border: 1px solid #61647a;
      border-right: none;
      border-top: none;
      border-bottom: none;
      line-height: 40px;
      text-indent: 10px;
    }
    .count_nest {
      width: 300px;
      border: 1px solid #61647a;
      border-top: none;
      border-bottom: none;
      line-height: 40px;
      text-indent: 10px;
    }
    .count_jiaci {
      width: 70px;
      border: 1px solid #61647a;
      border-top: none;
      border-bottom: none;
      line-height: 40px;
      text-align: center;
    }
    .count_havetwo {
      flex: 1;
      border: 1px solid #61647a;
      border-right: none;
      border-left: none;
      border-bottom: none;
      border-top: none;
      line-height: 40px;
    }

    .count_havemoretitle {
      display: flex;
      justify-content: space-around;
      line-height: 40px;
      > p {
        margin: 0;
        flex: 1;
        text-align: center;
        border: 1px solid #61647a;
        border-bottom: none;
        border-left: none;
        border-top: none;
      }
    }
  }

  .table_list {
    padding-bottom: 50px;
    > div:last-child {
      border-bottom: 1px solid #61647a;
    }
  }
  .table_info {
    display: flex;

    .info_area {
      width: 150px;
      border: 1px solid #61647a;
      border-right: none;
      border-bottom: none;
      display: table;
      > div {
        display: table-cell;
        vertical-align: middle;
        text-indent: 10px;
      }
    }
    .info_nest {
      width: 300px;
      border: 1px solid #61647a;
      border-bottom: none;
      text-indent: 10px;
      display: flex;
      justify-content: space-between;
      i {
        padding-right: 15px;
        padding-top: 13px;
      }
    }
    .info_plan {
      width: 70px;
      border: 1px solid #61647a;
      text-align: center;
      border-bottom: none;
    }
    .infobox {
      flex: 1;

      .info_data {
        flex: 1;
        display: flex;
        line-height: 40px;

        .havemoretitle {
          flex: 1;
          display: flex;
          justify-content: space-around;
          > p {
            line-height: 40px;
            border: 1px solid #61647a;

            width: 100%;
            text-align: center;
            border-left: none;
            border-bottom: none;
            margin: 0;
          }
        }
      }
      .info_data_list {
        background: #363a5c;
      }

      .isShowAll {
        height: 0;
        visibility: hidden;
      }
    }
  }
}
.info_data_list:hover {
  background: #00062f !important;
}
.mydatepicker.el-input__inner {
  width: 300px;
  background: rgba(31, 36, 74, 0.95);
  color: #aeaeae;
  height: vh(32);
  line-height: vh(32);
  padding: 0 8px;
  border: 1px solid #3d4059;
  cursor: pointer;

  ::v-deep .el-range-input {
    color: #aeaeae;
    background: rgba(255, 255, 255, 0);
  }
  ::v-deep .el-range__icon {
    line-height: vh(32);
  }
  ::v-deep .el-range-separator {
    color: #c3c3c3 !important;
    line-height: vh(32);
  }
}
.export-excel-wrapper {
  cursor: pointer;
  border: 2px solid #49628d;
  padding: 5px 10px;
  border-radius: 4px;
  margin: 14px 10px 0 0;
}
.tableList::-webkit-scrollbar {
  width: 7px;
  height: 10px;
  background-color: rgba(92, 90, 90, 0.7);
}
.tableList::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(42, 42, 44, 0.3);
  border-radius: 10px;
  background-color: rgba(236, 238, 241, 0.5);
}
.tableList::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(15, 15, 15, 0.2);
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
